import QtQuick 1.0
import "../"
import "../ListViews/"
import "../Models/"
import "../Util/Util.js" as Util

Rectangle {
    id: _root
    width: 300
    height: _icon.height + 10
    gradient: Gradient {
        GradientStop {
            id: _grad1
            position: 0
            color: itemForMe ? backgroundColorForMe : backgourndColor
        }
        GradientStop {
            id: _grad2
            position: 1
            color: itemForMe ? backgroundColorForMe : backgourndColor
        }
    }
    radius: 0 //"#5555aa"
    border.color: "#5c5c5c"

    property int itemIndex: -1
    property real density: _Device.density              // 密度

    // 背景
    property color backgourndColor: _Setting.itemBkColor
    property color backgroundColorForMe: _Setting.itemBkColorForMe

    // アイコン情報
    property alias iconVisible: _icon.visible
    property string iconPath: "../images/icon.png"
    property int iconSize: _Setting.iconSize

    // つぶやきとかの情報
    property string itemId: "0"
    property alias itemTitle: _title.text
    property string itemMessage: ""
    property string itemInformation: ""
    property bool itemForMe: false              // 自分宛のつぶやきか
    property bool accountProtected: false

    // インライン画像
    property alias itemPicture: _picture.source

    property alias acceptedButtons: _mouseArea.acceptedButtons

    // イベント
    signal clicked(int itemIndex, variant mouse, int prevPressedButtons)

    //in reply toを取得する
    function getInReplyTo(id){
        _modelInReplyTo.getMore(id);
    }

    // リンク用のスタイル作成
    function getLinkStyleString(color){
        return "<style>A:link{color:'" + color + "';text-decoration:underline;}"
                + " A:visited{text-decoration:underline;}"
                + " A:hover{text-decoration:underline;}</style>";
    }

    ImageWithSpinner {
        id: _icon
        width: iconSize
        height: iconSize
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter

        source: iconPath
        visible: iconVisible
    }

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true
        //            acceptedButtons: Qt.LeftButton | Qt.RightButton

        property int prevPressedButtons: 0

        //クリック時にハイライトさせる
        onPressed: {
            prevPressedButtons = pressedButtons;
            _root.state = "pressed";
        }
        onReleased: {
            _root.state = "";
        }

        //マウスオーバー
        onEntered: {
            _root.state = "hover";
        }
        onExited: {
            _root.state = "";
        }
        onCanceled: {
            _root.state = "";
        }

        // 長押し
        onPressAndHold: {
            // 長押し時は右クリック扱い
            _root.clicked(itemIndex, mouse, Qt.RightButton);
        }

        //クリック
        onClicked: {
            _root.clicked(itemIndex, mouse, prevPressedButtons);
        }
    }

    Column {
        id: _body
        anchors.left: _icon.right
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 5 + 5
        spacing: 5 * iconSize / 48

        Row{
            spacing: 10 * _root.density
            height: _title.paintedHeight
            Text {
                id: _title
                color: _Setting.fontColorTitle
//                width: parent.width
                font.pixelSize: _Setting.fontPixelSizeTitle * _root.density
                wrapMode: "WordWrap"
            }
            Image{
                source: "../images/protected.png"
                height: _title.paintedHeight
                visible: accountProtected
                fillMode: Image.PreserveAspectFit
            }
        }


        Text {
            id: _message
            color: _Setting.fontColorMessage
            width: parent.width
            font.pixelSize: _Setting.fontPixelSizeMessage * _root.density
            wrapMode: "WordWrap"
            text: getLinkStyleString(_Setting.fontColorMessage)
                  + itemMessage

            textFormat: Text.RichText
            onLinkActivated: {
                Qt.openUrlExternally(link);
            }
        }

        ImageWithSpinner {
            id: _picture
            width: 0
            height: 0
            source: ""
            visible: false
            anchors.leftMargin: 10

            onSourceChanged: {
                if(source.length > 0){
                    width = 50;
                    height = 50;
                }
            }

            onSourceSizeChanged: {
                width = sourceSize.width;
                height = sourceSize.height;
                visible = true;
            }
        }

        Text {

            id: _information
            color: _Setting.fontColorInfomation
            width: parent.width
            font.pixelSize: _Setting.fontPixelSizeInfomation * _root.density
            wrapMode: "WordWrap"
            text: getLinkStyleString(_Setting.fontColorInfomation) + itemInformation

            textFormat: Text.RichText
            onLinkActivated: {
                Qt.openUrlExternally(link);
            }
        }


        onHeightChanged: {
            if(_icon.height > _body.height){
                _root.height = _icon.height + 10;
            }else{
                _root.height = _body.height + 10;
            }
        }
    }



    states: [
        State {
            name: "pressed"
            PropertyChanges { target: _grad2; color: _Setting.itemBkColorPressed }
        },
        State {
            name: "hover"
            PropertyChanges { target: _grad2; color: _Setting.itemBkColorHover}
        }
    ]

}
